<template>
  <div id="data-view">
    <top-header @toNewPing="toNewPing" />
    <digital-flop :data="digitalFlopData" />
    <div class="main-content">
      <filter-board @filterDataEmit="filterDataEmit" />
      <div class="block-left-right-content">
        <div class="block-top-bottom-content">
          <div class="block-top-content">
            <rose-chart :data="roseData" />
            <water-level-chart ref="waterLevelChart" />
          </div>
          <!--销售日排-->
          <total-card ref="totalCard" />
          <sales-card ref="salesCard" />
          <sales-month-card ref="salesMonthCard" />
          <total-day-card ref="totalDayCard" />
          <total-month-card ref="totalMonthCard" />
          <!--          <div style="height: 400px">
            <table-board :table-data="tableData" />
          </div>-->
          <!--金额-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topHeader from './components/datav/topHeader'
import digitalFlop from './components/datav/digitalFlop'
import filterBoard from './components/datav/filterBoard'
import roseChart from './components/datav/roseChart'
import waterLevelChart from './components/datav/waterLevelChart'
// import tableBoard from './components/datav/tableBoard'
import { getBigPingTop } from '@/api/remote-search'
import totalCard from './components/datav/totalCard'
import { getSales } from '@/api/visualFilter'
import salesCard from '@/views/sales/components/datav/salesCard'
import salesMonthCard from '@/views/sales/components/datav/salesMonthCard'
import totalDayCard from '@/views/sales/components/datav/totalDayCard'
import totalMonthCard from '@/views/sales/components/datav/totalMonthCard'

export default {
  name: 'DataView',
  components: {
    topHeader,
    digitalFlop,
    filterBoard,
    roseChart,
    waterLevelChart,
    // tableBoard,
    totalCard,
    salesCard,
    salesMonthCard,
    totalDayCard,
    totalMonthCard
  },
  data() {
    return {
      digitalFlopData: [],
      roseData: [],
      tableData: [],
      salesData: {
        count: []
      },
      filterData: {
      // 选择的平台
        platforms: [],
        brands: [],
        filters: []
      }
    }
  },
  mounted() {
    this.loadData()
    // 初始化数据
    this.filterDataEmit(this.filterData)
  },
  methods: {
    // 转到大屏
    toNewPing() {
      const data = JSON.stringify(this.filterData) // result传递的query参数。我们转为string
      this.$router.push({ path: '/bp', query: { res: data }})
    },
    filterDataEmit(data) {
      this.filterData = data
      // 获取五天的金额
      getSales(data).then(res => {
        this.salesData = res.data
        this.$refs.waterLevelChart.data = res.data.roseData
        this.$refs.totalCard.cardData = res.data.count
        this.$refs.salesCard.cardData = res.data.salesFive
        this.$refs.salesMonthCard.cardData = res.data.salesMonthList
        this.$refs.totalDayCard.cardData = res.data.totalDayList
        this.$refs.totalMonthCard.cardData = res.data.totalMonthList
        this.$notify({
          title: '成功',
          message: '获取筛选数据成功',
          type: 'success'
        })
      })
    },
    loadData() {
      getBigPingTop().then((res) => {
        const data = res.data
        this.tableData = res.table
        this.digitalFlopData = []
        data.forEach((item) => {
          const dataItem = {
            title: item.name,
            number: {
              number: [item.money],
              content: '{nt}',
              textAlign: 'right',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize: 20
              },
              formatter: (number) => {
                const numbers = number.toString().split('').reverse()
                const segs = []

                while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

                return segs.join(',').split('').reverse().join('')
              }
            },
            unit: '元'
          }
          this.digitalFlopData.push(dataItem)
          this.roseData.push({
            'name': item.name,
            'value': item.money
          })
          this.$refs.waterLevelChart.data = this.roseData
        })
      })
    }
  }
}
</script>

<style lang="scss">
  #data-view {
    width: 100%;
    height: 100%;
    background-color: #030409;
    color: #fff;
    background-image: url('../../assets/imgs/datavBg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;

    .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .block-left-right-content {
      flex: 1;
      display: flex;
      margin-top: 20px;
    }

    .block-top-bottom-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding-left: 20px;
    }

    .block-top-content {
      height: 55%;
      display: flex;
      flex-grow: 0;
      box-sizing: border-box;
      padding-bottom: 20px;
    }
  }
</style>
